<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>言志官网</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

    <div class="loginfos navbarheadnull">
        <div class="loginform">
            <form action="">
                <h3>账号登录</h3>
                <div class="m-inputlabel">
                    <i class="iconfont icon-shouji"></i>
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div class="m-inputlabel">
                    <i class="iconfont icon-mima"></i>
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div class="usyzminfo">
                    <div class="m-inputlabel">
                        <i class="iconfont icon-yanzhengma"></i>
                        <input type="text" placeholder="请输入验证码">
                    </div>
                    <span class="yzmview"><img src="" alt=""></span>
                </div>
                
                <button>提 交</button>
                <p class="gdlink">
                    <a href="" class="float">忘记密码</a>
                    <a href="" class="right">立即注册</a>
                </p>
            </form>
        </div>
    </div>
    <style>
    .loginfos{background:url(./img/loginbg.png) top center no-repeat;background-size:100% auto;width:100%;overflow: hidden;}
    .loginform{padding:30px 45px 70px;margin:120px auto 120px;background:#ffffff;width:320px; transform: translateX(440px);box-sizing: content-box;}
    .loginform h3{font-size:20px;}
    .m-inputlabel{border:solid 1px #808080;border-radius: 3px;margin-bottom:15px;}
    .m-inputlabel .iconfont{display: inline-block;font-size:24px;padding-left:10px;vertical-align: middle;}
    .m-inputlabel input{display: inline;border:none;width:78%;margin:0;padding-left:12px;background:none;box-shadow: none;}
    .m-inputlabel input:focus{outline: none;background:none;}
    .usyzminfo {overflow: hidden;}
    .usyzminfo .m-inputlabel{width:60%;float:left;}
    .usyzminfo .yzmview{float:right;width:100px;height:40px;background:#dfdfdf;}
    .loginform button{width:100%;line-height:40px;background:#141765;color:#ffffff;font-weight: bold;border-radius: 5px;margin:0;padding:0;}
    .gdlink{margin-top:10px;}
    .gdlink a{font-size:14px;color:#8a8a8a;font-size:11px;}
    </style>
</body>
</html>